<!--
 * @FileDescription: 
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2021-08-19 16:54:21
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2021-09-17 11:17:08
-->
<!--
 * @FileDescription: 
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2021-08-19 16:42:21
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2021-08-19 16:43:46
-->
<template>
  <div
    v-loading="loading"
    element-loading-text="在住加载远程资源"
    element-loading-spinner="el-icon-loading"
  >
    <iframe
      :src="url"
      @load="loadsuccess"
      frameborder="0"
      :style="{ height: height }"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    url: "",
    height: {
      type: String,
      default: "500px",
    },
  },
  data() {
    return {
      loading: true,
    };
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    loadsuccess() {
      this.loading = false;
    },
  },
};
</script>
<style scoped>
iframe {
  width: 100%;
  height: 500px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 5px;
}
</style>
